<template>  
    <div>  
        <el-form ref="form" :model="users" label-width="80px">  
            <el-form-item label="登录姓名:">  
                <el-input v-model="users.loginName"></el-input>  
            </el-form-item>  
            <el-form-item label="密码:">  
                <el-input type="password" v-model="users.loginPwd"></el-input>  
            </el-form-item>  
            <el-form-item label="用户名:">  
                <el-input v-model="users.userName"></el-input>  
            </el-form-item>  
            <el-form-item label="性别:">  
                <el-select v-model="users.sex">  
                    <el-option label="男" value="男"></el-option>  
                    <el-option label="女" value="女"></el-option>  
                </el-select>  
            </el-form-item>  
            <el-form-item label="出生日期:">  
                <el-date-picker v-model="users.birthday" type="date" placeholder="选择出生日期"></el-date-picker>  
            </el-form-item>  
            <el-form-item label="电话:">  
                <el-input v-model="users.phone"></el-input>  
            </el-form-item>  
            <el-form-item label="部门">  
                <el-select v-model="users.deptID" @change="updateRoles" placeholder="请选择部门">  
                    <el-option  
                        v-for="dept in departments"  
                        :key="dept.deptID"  
                        :label="dept.deptName"  
                        :value="dept.deptID"  
                    ></el-option>  
                </el-select>  
            </el-form-item>  
            <el-form-item label="角色ID:">  
                <el-select v-model="users.roleID" placeholder="请选择角色">  
                    <el-option  
                        v-for="role in filteredRoles"  
                        :key="role.roleID"  
                        :label="role.roleName"  
                        :value="role.roleID"  
                    ></el-option>  
                </el-select>  
            </el-form-item>  
            <el-form-item>  
                <el-button type="primary" @click="Edit">保存</el-button>  
                <el-button @click="cancel">取消</el-button>  
            </el-form-item>  
        </el-form>  
    </div>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            users: JSON.parse(sessionStorage.getItem("EditUsers")),  
            roles: [],  
            departments: [], // 用于存储部门  
            filteredRoles: [] // 用于存储根据部门筛选的角色  
        };  
    },  
    methods: {  
        ShowRoles() {  
            this.axios({  
                method: "get",  
                url: "Role",  
            }).then(res => {  
                this.roles = res.data;  
                this.updateRoles(); // 初始化时更新角色  
            }).catch(err => {  
                console.log("请求失败:", err);  
            });  
        },  
        ShowDepartments() {  
            this.axios({  
                method: "get",  
                url: "Dept",  
            }).then(res => {  
                this.departments = res.data;  
            }).catch(err => {  
                console.log("请求失败:", err);  
            });  
        },  
        updateRoles() {  
            // 根据选择的部门过滤角色  
            this.filteredRoles = this.roles.filter(role => role.deptID === this.users.deptID);  
            //this.users.roleID = ""; // 重置角色ID  
        },  
        Edit() {  
            this.axios({  
                method: "put",  
                url: "Users/" + this.users.userID,  
                data: JSON.stringify(this.users),  
                headers: {  
                    'Content-Type': 'application/json'  
                }  
            }).then(res => {  
                if (res) {  
                    this.$notify({  
                        title: '修改成功!',  
                        message: '这是一条成功的提示消息',  
                        type: 'success'  
                    });  
                    // 关闭弹窗  
                    this.$emit("update:editdialogVisible", false);  
                    // 刷新  
                    this.$emit('Refresh');  
                } else {  
                    alert("修改失败!");  
                }  
            }).catch(err => {  
                console.error("请求失败:" + err);  
                alert("请求失败!!!");  
            });  
        },  
        cancel() {  
            this.$emit("update:editdialogVisible", false); // 关闭弹窗  
        }  
    },  
    created() {  
        this.ShowRoles();  
        this.ShowDepartments(); // 获取部门信息  
    }  
}  
</script>  

<style>  
.form-row {  
    display: grid;  
    grid-template-columns: 100px 1fr; /* 定义两列，第一列100px，第二列填充剩余空间 */  
    grid-gap: 10px; /* 设置网格间距 */  
    margin-bottom: 10px; /* 可选：增加行间距 */  
}  

.form-row label {  
    text-align: right; /* 可选：右对齐标签 */  
}  
</style>  